'use client';

import { useActionState } from 'react';
import { addItemAction, updateItemAction } from '@/lib/account/actions';
import { idle, type ActionState } from '@/lib/auth/state';
import { Field, FormMessage, Select, SubmitButton, TextArea, TextInput } from '@/components/account/form';
import { AssetPicker, type PickedAsset } from '@/components/account/asset-picker';

const CURRENCIES = ['USD', 'CAD', 'EUR', 'GBP', 'JPY', 'CHF', 'AUD'];
const GRADERS = ['', 'psa', 'bgs', 'cgc', 'sgc', 'tag', 'ace', 'cbcs', 'wata', 'vga', 'pcgs', 'ngc'];

export interface ItemInitial {
  itemId: string;
  asset: PickedAsset;
  quantity: number;
  acquiredAt: string | null;
  purchasePrice: number | null;
  purchaseCurrency: string | null;
  source: string | null;
  grader: string | null;
  grade: string | null;
  certificationNumber: string | null;
  serial: string | null;
  condition: string | null;
  notes: string | null;
  tags: string[];
  manualValueUsd: number | null;
  soldAt: string | null;
  soldPriceUsd: number | null;
}

export function AddItemForm({ collectionId }: { collectionId: string }) {
  const [state, action] = useActionState(addItemAction, idle);
  return <ItemFields state={state} action={action} collectionId={collectionId} submitLabel="Add to collection" />;
}

export function EditItemForm({ initial }: { initial: ItemInitial }) {
  const [state, action] = useActionState(updateItemAction, idle);
  return <ItemFields state={state} action={action} initial={initial} submitLabel="Save item" />;
}

function ItemFields({ state, action, collectionId, initial, submitLabel }: { state: ActionState; action: (fd: FormData) => void; collectionId?: string; initial?: ItemInitial; submitLabel: string }) {
  return (
    <form action={action} className="space-y-4" noValidate key={state.ok && !initial ? String(state.data?.itemId) : 'form'}>
      {collectionId ? <input type="hidden" name="collectionId" value={collectionId} /> : null}
      {initial ? <input type="hidden" name="itemId" value={initial.itemId} /> : null}
      <FormMessage state={state} />
      {initial ? <input type="hidden" name="assetId" value={initial.asset.id} /> : null}
      <AssetPicker initial={initial?.asset ?? null} error={state.fieldErrors?.assetId} withVariant={!initial} />
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Field label="Quantity" name="quantity" error={state.fieldErrors?.quantity}>
          <TextInput name="quantity" type="number" min={1} max={10000} defaultValue={initial?.quantity ?? 1} required />
        </Field>
        <Field label="Acquired on" name="acquiredAt" error={state.fieldErrors?.acquiredAt}>
          <TextInput name="acquiredAt" type="date" defaultValue={initial?.acquiredAt ?? ''} max={new Date().toISOString().slice(0, 10)} />
        </Field>
        <Field label="Purchase price (per unit)" name="purchasePrice" error={state.fieldErrors?.purchasePrice}>
          <TextInput name="purchasePrice" type="number" min={0} step="0.01" defaultValue={initial?.purchasePrice ?? ''} placeholder="0.00" />
        </Field>
        <Field label="Currency" name="purchaseCurrency" hint="Converted to USD at the acquisition-date rate.">
          <Select name="purchaseCurrency" defaultValue={initial?.purchaseCurrency ?? 'USD'}>
            {CURRENCIES.map((c) => (
              <option key={c} value={c}>
                {c}
              </option>
            ))}
          </Select>
        </Field>
      </div>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Field label="Grader" name="grader" hint="Used when no variant is selected.">
          <Select name="grader" defaultValue={initial?.grader ?? ''}>
            {GRADERS.map((g) => (
              <option key={g} value={g}>
                {g ? g.toUpperCase() : 'Raw / none'}
              </option>
            ))}
          </Select>
        </Field>
        <Field label="Grade" name="grade">
          <TextInput name="grade" defaultValue={initial?.grade ?? ''} placeholder="10, 9.5, 9.8, MS65…" maxLength={12} />
        </Field>
        <Field label="Certification #" name="certificationNumber">
          <TextInput name="certificationNumber" defaultValue={initial?.certificationNumber ?? ''} maxLength={40} className="mono-num" />
        </Field>
        <Field label="Serial / reference" name="serial">
          <TextInput name="serial" defaultValue={initial?.serial ?? ''} maxLength={60} className="mono-num" />
        </Field>
      </div>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Field label="Condition" name="condition">
          <TextInput name="condition" defaultValue={initial?.condition ?? ''} placeholder="sealed, CIB, unworn, full set…" maxLength={40} />
        </Field>
        <Field label="Source" name="source">
          <TextInput name="source" defaultValue={initial?.source ?? ''} placeholder="eBay, Heritage, local show…" maxLength={120} />
        </Field>
        <Field label="Tags" name="tags" hint="Comma-separated, up to 12.">
          <TextInput name="tags" defaultValue={initial?.tags.join(', ') ?? ''} placeholder="grail, sealed, gift" maxLength={200} />
        </Field>
        <Field label="Manual value (USD)" name="manualValueUsd" hint="Fallback only when RareIndex has no valuation; never shown as RIV.">
          <TextInput name="manualValueUsd" type="number" min={0} step="0.01" defaultValue={initial?.manualValueUsd ?? ''} />
        </Field>
      </div>
      {initial ? (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <Field label="Sold on (optional)" name="soldAt">
            <TextInput name="soldAt" type="date" defaultValue={initial.soldAt ?? ''} />
          </Field>
          <Field label="Sold price (USD)" name="soldPriceUsd">
            <TextInput name="soldPriceUsd" type="number" min={0} step="0.01" defaultValue={initial.soldPriceUsd ?? ''} />
          </Field>
        </div>
      ) : null}
      <Field label="Notes" name="notes">
        <TextArea name="notes" defaultValue={initial?.notes ?? ''} maxLength={2000} placeholder="Provenance, storage location, insurance reference…" className="min-h-[70px]" />
      </Field>
      <SubmitButton pendingText="Saving…">{submitLabel}</SubmitButton>
    </form>
  );
}